<script setup lang="ts">
import { ref } from 'vue'
import ReserveHeader from '@/components/ReserveHeader'
import SpuHead from '@/components/ReserveComponents/Head'
import ColorPicker from '@/components/ReserveComponents/ColorPicker'
import SkuPicker from '@/components/ReserveComponents/SkuPicker'
import SummaryContainer from '@/components/ReserveComponents/Summary'
import FyiModal from '@/components/FyiModal'
import { numberFormatter } from '@/plugins/number.plugin'

const SpuHeadData = ref({
  "badge": "Completely Independently Designed",
  "title": "Reserve a Tron Suit",
  "lines": [
    "Each customer is limited to 2 pieces of this style of latex suit.",
    "RMB 4,999 per each piece."
  ],
  "buttons": [
    {
      "name": "F2F Body Measurement",
      "icon": "plus",
      "action": ""
    },
    {
      "name": 'How to reserve a suit'
    }
  ]
})

const spuMainData = ref({
  "title": "Suit",
  "sub": "Basic suit with basic specs.",
  "fee": 389900,
  "currency": "RMB"
})

const spuMainSwiper = ref([
  { backImgUrl: 'https://oss.upyun.mitkimi.com/www/WechatIMG20906-5e9de05fcf3b4e2ca657c85f981a0d1b.jpeg' },
  { backImgUrl: 'https://oss.upyun.mitkimi.com/www/%E7%94%BB%E6%9D%BF%201-b88d24ee26d14b64938970a1406a648b.png' },
  { backImgUrl: 'https://oss.upyun.mitkimi.com/www/5f6e1d7bc9abd_5f6e1d8fe527e-a267ec28205c4a2abaa651f8c9fb73ad.jpg' }
])

const colorPickerData = ref([
  {
    "title": "Base Color",
    "sub": "Refers to the base color part",
    "recommand": "black",
    "list": [
      {
        "name": "Black",
        "alias": "black",
        "background": "linear-gradient(to bottom, #000000, #737373)"
      },
      {
        "name": "Blue",
        "alias": "blue",
        "background": "#0014C9"
      },
      {
        "name": "Orange",
        "alias": "orange",
        "background": "#ED8E00"
      }
    ]
  },
  {
    "title": "Main Decoration Color",
    "sub": "Large areas of color blocks or main lines for decoration",
    "recommand": "orange",
    "list": [
      {
        "name": "Orange",
        "alias": "orange",
        "background": "linear-gradient(to bottom, #F77600, #F6C172)"
      },
      {
        "name": "Blue",
        "alias": "blue",
        "background": "linear-gradient(to bottom, #009EF7, #72C6F6)"
      },
      {
        "name": "Silver",
        "alias": "silver",
        "background": "linear-gradient(to bottom, #969696, #C2C2C2)"
      }
    ]
  },
  {
    "title": "Secondary Decoration Color",
    "sub": "Some related areas of color blocks for decoration",
    "recommand": "silver",
    "list": [
      {
        "name": "Silver",
        "alias": "silver",
        "background": "linear-gradient(to bottom, #969696, #C2C2C2)"
      },
      {
        "name": "Gold",
        "alias": "gold",
        "background": "linear-gradient(to bottom, #F7D600, #F6E272)",
      }
    ]
  }
])

const faceSpuData = ref({
  name: 'Face',
  sub: 'Select your Mask or Hood.',
  default: 'face-option-1',
  currency: 'RMB',
  list: [
    {
      alias: 'face-option-1',
      title: 'Wrapped Mask with micro perforations',
      sub: 'Full-coverage mask with micro-perforations for eyes and nostrils',
      fee: 15000
    },
    {
      alias: 'face-option-2',
      title: 'Snow goggles',
      sub: 'Snow goggles shaped eye window with micro-perforations for nostrils',
      fee: 15000
    },
    {
      alias: 'face-option-3',
      title: 'Open Chin',
      sub: 'Open chin window with micro-perforations for eyes',
      fee: 20000
    },
    {
      alias: 'face-option-4',
      title: 'Without any masks or hoods',
      sub: 'Free head',
      fee: 0
    },
  ],
  relatedInfoList: [
    {
      type: 'modal',
      title: 'How to select face cover?',
      sub: 'This video will give you more information',
      coverUrl: 'https://oss.upyun.mitkimi.com/www/WechatIMG20906-5e9de05fcf3b4e2ca657c85f981a0d1b.jpeg',
    }
  ]
})

const handsSpuData = ref({
  name: 'Hands',
  sub: 'Select your hands’ cover.',
  default: 'hands-option-1',
  currency: 'RMB',
  list: [
    {
      alias: 'hands-option-1',
      title: 'Full gloves',
      sub: 'A pair of normal latex gloves.',
      fee: 15000
    },
    {
      alias: 'hands-option-2',
      title: 'Connected Full gloves',
      sub: 'A pair of normal latex gloves connected to the sleeves.',
      fee: 15000
    },
    {
      alias: 'hands-option-3',
      title: 'Half palm gloves',
      sub: 'Half palm gloves connected to the sleeves.',
      fee: 10000
    },
    {
      alias: 'hands-option-4',
      title: 'Without any hands’ cover',
      sub: 'Free hands',
      fee: 0
    },
  ],
  relatedInfoList: [
    {
      type: 'modal',
      title: 'How to select hands cover?',
      sub: 'This video will give you more information',
      coverUrl: 'https://oss.upyun.mitkimi.com/testing/WX20241025-131313%402x.png'
    }
  ]
})

const handsTutorialDialogOpen = ref(false)

const feetSpuData = ref({
  name: 'Feet',
  sub: 'Select your feet’s cover.',
  default: 'feet-option-1',
  currency: 'RMB',
  list: [
    {
      alias: 'feet-option-1',
      title: 'Socks',
      sub: 'A pair of normal latex socks.',
      fee: 15000
    },
    {
      alias: 'feet-option-2',
      title: 'Connected Socks',
      sub: 'A pair of normal latex gloves connected to the sleeves.',
      fee: 20000
    },
    {
      alias: 'feet-option-3',
      title: 'Tabi Socks',
      sub: 'Half palm gloves connected to the sleeves.',
      fee: 15000
    },
    {
      alias: 'feet-option-4',
      title: 'Connected Tabi Socks',
      sub: 'Half palm gloves connected to the sleeves.',
      fee: 20000
    },
    {
      alias: 'feet-option-5',
      title: 'Toe Socks',
      sub: 'Half palm gloves connected to the sleeves.',
      fee: 25000
    },
    {
      alias: 'feet-option-6',
      title: 'Connected Toe Socks',
      sub: 'Half palm gloves connected to the sleeves.',
      fee: 40000
    },
    {
      alias: 'feet-option-7',
      title: 'Without any feet’s cover',
      sub: 'Free feet',
      fee: 0
    },
  ],
  relatedInfoList: [
    {
      type: 'modal',
      title: 'How to select feet’s cover?',
      sub: 'This video will give you more information',
      coverUrl: 'https://oss.upyun.mitkimi.com/www/WechatIMG20906-5e9de05fcf3b4e2ca657c85f981a0d1b.jpeg',
    }
  ]
})

const sizingSpuData = ref({
  name: 'Sizing',
  sub: 'Select standard size or customize.',
  default: 'sizing-option-1',
  currency: 'RMB',
  list: [
    {
      alias: 'sizing-option-1',
      title: 'Standard Size',
      sub: 'You can select standard size later.',
      fee: 0
    },
    {
      alias: 'sizing-option-2',
      title: 'Customize by yourself',
      sub: 'Follow the instructions & measure your body.',
      fee: 5000
    },
    {
      alias: 'sizing-option-3',
      title: 'F2F body measureing',
      sub: 'Our partner will meet you and measure you for better size.',
      fee: 20000
    }
  ],
  relatedInfoList: [
    {
      type: 'modal',
      title: 'How to measure your body?',
      sub: 'This video will give you more information',
      coverUrl: 'https://oss.upyun.mitkimi.com/www/WechatIMG20906-5e9de05fcf3b4e2ca657c85f981a0d1b.jpeg',
    }
  ]
})

const feeInfo = ref({
  name: 'Tron Latex Suit',
  renderOrder: ['base_suit', 'color_add', 'face_add', 'hands_add', 'feet_add', 'sizing_add'],
  items: {
    base_suit: { name: 'Base suit', fee: 389900, addMark: false },
    color_add: { name: 'Color add', fee: 0, addMark: true },
    face_add: { name: 'Face add', fee: 0, addMark: true },
    hands_add: { name: 'Hands add', fee: 15000, addMark: true },
    feet_add: { name: 'Feet add', fee: 0, addMark: true },
    sizing_add: { name: 'Sizing add', fee: 0, addMark: true },
  }
})

const schedule = [
  { name: 'Ording', content: 'today' },
  { name: 'Measuring', content: 'Update or call a Davinci Friend.' },
  { name: 'Perparing', content: 'It’ll cost about 40 days to prepare your suit.', important: true },
  { name: 'Delivering', content: 'By SF Express or DHL.' }
]

const qa = [
{
    name: 'The Beauty of a Tranquil Morning',
    content: `<p>As the first rays of the sun gently pierce through the thin veil of the morning mist, a sense of tranquility and hope fills the air. The world seems to awaken slowly, as if reluctant to break the spell of the peaceful night that has just passed.</p>
<p>In the garden, dewdrops glisten like tiny diamonds on the delicate petals of flowers. Each droplet is a miniature world, reflecting the soft colors of the surrounding blossoms and the clear blue of the morning sky. The gentle breeze whispers through the leaves, creating a soothing melody that dances with the fragrance of freshly bloomed roses and lavender. It is a symphony of nature, a harmonious blend of sight, sound, and scent that invigorates the soul.</p>
<p>A solitary bird perches on a branch, its feathers ruffled slightly by the morning breeze. It tilts its head, as if listening intently to the secrets that the wind brings. Then, with a flutter of its wings, it takes flight, soaring gracefully across the sky. Its silhouette against the backdrop of the rising sun is a picture of freedom and beauty, a reminder of the wonders that exist in the simplest of moments.</p>
<p>Walking along a path that winds through the meadow, the grass beneath one's feet feels soft and springy. The blades are damp with dew, and as one walks, a faint mist rises, creating an almost ethereal atmosphere. In the distance, the mountains stand tall and majestic, their peaks kissed by the golden light of the sun. They seem to be guardians of this peaceful landscape, silently watching over the passage of time.</p>
<p>The morning is a time of new beginnings, a chance to start afresh and embrace the possibilities that the day holds. It is a time to be still and listen to the whispers of the heart, to find inspiration in the beauty that surrounds us. In this tranquil moment, we are reminded that life is a precious gift, filled with small miracles and unending beauty, waiting to be discovered and cherished.</p>`
  },
  {
    name: 'The Magic of a Starlit Night',
    content: `<p>When the sun dips below the horizon and the night unfolds its velvet cloak, the sky is transformed into a breathtaking canvas of twinkling stars. The starlit night is a realm of magic and wonder, where the boundaries between reality and dreams seem to blur.</p>
<p>The stars, like countless diamonds scattered across the vast expanse of the universe, shine with a brilliance that is both captivating and mysterious. Some are bright and bold, while others twinkle faintly, as if playing a 捉迷藏 game with the observer. They form constellations that have told stories throughout the ages, guiding sailors on their voyages and inspiring poets to pen their verses.</p>
<p>Under the starlit sky, the world takes on a different hue. The landscape is bathed in a soft, silver light that casts long shadows and gives a sense of depth and stillness. A gentle breeze rustles the leaves of the trees, creating a lullaby that accompanies the quiet symphony of the night. The crickets chirp in the grass, adding their own melody to the nocturnal chorus.</p>
<p>Lying on a blanket in an open field, one can feel the vastness of the universe above. The stars seem so close, yet so infinitely far away, a reminder of the insignificance of our individual selves in the grand scheme of things. And yet, in that very insignificance, there is a sense of freedom and possibility. We are part of this great cosmic dance, connected to the stars and the mysteries of the universe in ways we may never fully understand.</p>
<p>The starlit night is a time for reflection and introspection. It is a moment to look beyond the hustle and bustle of daily life and contemplate the bigger questions - about our purpose, our dreams, and our place in the world. In the silence of the night, with only the stars as our witnesses, we can find a sense of peace and clarity that eludes us during the day.</p>
<p>As the night progresses and the stars continue to shine their unwavering light, we are filled with a sense of awe and wonder. The starlit night is a reminder of the beauty and magic that exists in the world, waiting to be discovered by those who are willing to look up and see. It is a gift from the universe, a source of inspiration and a sanctuary for the soul.</p>`
  },
  {
    name: 'The Journey Within',
    content: `<p>Life is a journey, not a destination. It is a continuous exploration of the self, a winding path filled with joys and sorrows, triumphs and setbacks, and countless opportunities for growth and discovery.
<p>We set out on this journey with dreams in our hearts and a thirst for adventure. Along the way, we encounter new places, meet different people, and experience a kaleidoscope of emotions. Each step we take is a lesson learned, each encounter a chance to understand ourselves and the world around us better.</p>
<p>There are times when the road is smooth and the sun shines brightly, filling us with a sense of optimism and hope. We achieve our goals, find love and friendship, and feel a sense of accomplishment. These are the moments that make life beautiful, that give us the strength to keep moving forward.</p>
<p>But there are also times when the path becomes rocky and the storms of life rage. We face failures, lose loved ones, and question our purpose. These are the trials that test our resolve, that force us to dig deep within ourselves and find the courage to persevere.</p>
<p>In the midst of the journey, we often forget to look within. We are so focused on the external world, on achieving success and pleasing others, that we neglect the most important part of ourselves - our inner being. But it is in the stillness of our hearts, in the quiet moments of self-reflection, that we truly discover who we are.</p>
<p>The journey within is a journey of self-discovery and self-love. It is about learning to accept our flaws and strengths, our past and present, and embracing the unique journey that we are on. It is about finding the courage to follow our passions, to listen to the voice of our soul, and to live a life that is true to ourselves.</p>
<p>As we travel through life, let us not forget to take the time to explore the depths of our being. Let us cherish the moments of joy and find strength in the face of adversity. For in the end, the journey within is what truly shapes us and makes our lives meaningful. It is a journey that leads us to a place of self-awareness, peace, and fulfillment, and it is a journey that is worth taking with an open heart and a brave spirit.</p>`
  }
]

</script>
<template>
  <reserve-header />
  <div class="reserve-page-container">
    <spu-head class="section" :data="SpuHeadData" />
    <div class="container-core">
      <div class="section spu-basis">
        <div class="banner-container">
          <div class="banner">
            <ap-carousel :data="spuMainSwiper" indicator="dash" loop />
          </div>
        </div>
        <div class="basis-selector-container">
          <div class="basis-main-container">
            <div class="main-title">{{ spuMainData.title }}</div>
            <div class="basis-related-txt">{{ spuMainData.sub }}</div>
            <div class="basis-price">{{ spuMainData.currency }} {{ numberFormatter(spuMainData.fee, 100) }}</div>
          </div>
          <div class="basis-color-picker-container" v-for="item,index in colorPickerData">
            <color-picker :data="item" />
          </div>
        </div>
      </div>
    </div>
    <div class="section sku-container">
      <div class="container-core">
        <sku-picker :data="faceSpuData" />
      </div>
    </div>
    <div class="section sku-container">
      <div class="container-core">
        <sku-picker :data="handsSpuData" @fyiCallback="() => handsTutorialDialogOpen = true" />
      </div>
    </div>
    <div class="section sku-container">
      <div class="container-core">
        <sku-picker :data="feetSpuData" />
      </div>
    </div>
    <div class="section sku-container">
      <div class="container-core">
        <sku-picker :data="sizingSpuData" />
      </div>
    </div>
    <div class="section summary-info-container">
      <div class="container-core">
        <summary-container :schedule="schedule" :fee-info="feeInfo" />
      </div>
    </div>
    <div class="section qa-container">
      <div class="section-title">Q&A</div>
      <div class="container-core qa-content">
        <ap-collapse :data="qa" />
      </div>
    </div>
    <div class="section fyi-container">
      <div class="container-core">
        <p>Here is a simple English statement for occupying space:</p>
        <p>This is just a placeholder text. It doesn't convey any specific meaning but is used to take up a certain area or position, for example, in a document layout where we need to reserve some space for future content addition or for the sake of visual balance in the overall design. Another reason could be for testing purposes, such as when we are checking how a certain layout or format will look when there is some pre - filled text in a particular section.</p>
        <p>This is a piece of text created solely for the purpose of occupying a position. It can be used in various scenarios. For instance, when drafting a report, sometimes we need to leave some blank areas initially but still want to show that there is supposed to be content there in the future. This English statement can fill such areas without actually delivering any substantial information at the moment. It might also be useful in formatting documents.</p>
      </div>
    </div>
  </div>
  <fyi-modal v-model="handsTutorialDialogOpen" use-footer>
    <div class="model-fyi-container">
      <div class="model-title">Select hands' cover base on your favorite</div>
      <div class="model-content">
        <p>In the early morning, the world is bathed in the gentle glow of the sun. The first rays of light peek through the clouds, like delicate fingers reaching out to touch the earth. The dewdrops on the grass sparkle like tiny diamonds, each one holding a miniature world within.</p>
        <p>Birds start their daily chorus, singing songs of joy as they welcome the new day. The flowers slowly unfold their petals, as if awakening from a sweet dream. The air is fresh and crisp, filled with the sweet fragrance of blossoms.</p>
        <p>As the sun climbs higher, it paints the sky with warm colors - hues of orange, pink, and gold blend together seamlessly. The trees stand tall, their leaves rustling softly in the gentle breeze. This is the magic of the morning sun, a sight that rejuvenates the soul and gives hope for a beautiful day ahead.</p>
      </div>
      <ap-video source="https://cdn.offontime.com/video/davinci.mp4"></ap-video>
      <div class="model-content">
        <p>In the early morning, the world is bathed in the gentle glow of the sun. The first rays of light peek through the clouds, like delicate fingers reaching out to touch the earth. The dewdrops on the grass sparkle like tiny diamonds, each one holding a miniature world within.</p>
        <p>Birds start their daily chorus, singing songs of joy as they welcome the new day. The flowers slowly unfold their petals, as if awakening from a sweet dream. The air is fresh and crisp, filled with the sweet fragrance of blossoms.</p>
        <p>As the sun climbs higher, it paints the sky with warm colors - hues of orange, pink, and gold blend together seamlessly. The trees stand tall, their leaves rustling softly in the gentle breeze. This is the magic of the morning sun, a sight that rejuvenates the soul and gives hope for a beautiful day ahead.</p>
      </div>
    </div>
  </fyi-modal>
</template>

<style lang="less" scoped>
.reserve-page-container {
  position: relative;
  z-index: 0;
  .section {
    .section-title {
      font-weight: bold;
      text-align: center;
    }
  }
  .spu-basis {
    .banner-container {
      .banner {
        overflow: hidden;
      }
    }
    .basis-selector-container {
      .main-title {
        font-weight: bold;
      }
      .basis-price {
        font-weight: bold;
      }
      .basis-related-txt {
        color: #999999;
      }
    }
  }
  .sku-container {}
  .summary-info-container {
    background: #FAFAFA;
  }
  .qa-container {}
  .fyi-container {
    background: #FAFAFA;
    p {
      color: #888888;
      &:first-child {
        margin-top: 0;
      }
    }
  }
}

// Mobile
@media screen and (max-width: 767px) {
  .reserve-page-container {
    padding-top: 90px;
    .section {
      margin-top: 45px;
      .section-title {
        font-size: 32px;
      }
    }
    .spu-basis {
      .banner-container {
        position: relative;
        width: 345px;
        .banner {
          width: 100%;
          height: 300px;
          background: #333333;
          border-radius: 20px;
        }
      }
      .basis-selector-container {
        margin-top: 45px;
        width: 345px;
        .basis-main-container {
          position: relative;
          .main-title {
            font-size: 20px;
          }
          .basis-related-txt {
            font-size: 14px;
          }
          .basis-price {
            font-size: 20px;
            position: absolute;
            top: 0;
            right: 0;
          }
        }
        .basis-color-picker-container {
          margin-top: 60px;
        }
      }
    }
    .sku-container {
      margin-top: 90px;
    }
    .summary-info-container {
      margin-top: 90px;
      padding: 45px 0;
    }
    .qa-container {
      margin-top: 100px;
      .qa-content {
        margin-top: 60px;
      }
    }
    .fyi-container {
      margin: 100px 0;
      padding: 40px 0;
      p {
        font-size: 14px;
        margin-top: 16px;
      }
    }
  }
}

// Tablet
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .reserve-page-container {
    padding-top: 90px;
    .section {
      margin-top: 45px;
      .section-title {
        font-size: 32px;
      }
    }
    .spu-basis {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      .banner-container {
        position: relative;
        width: 465px;
        .banner {
          width: 100%;
          height: 360px;
          position: absolute;
          background: #333333;
          border-radius: 20px;
        }
      }
      .basis-selector-container {
        width: 225px;
        .basis-main-container {
          position: relative;
          .main-title {
            font-size: 20px;
          }
          .basis-related-txt {
            font-size: 14px;
          }
          .basis-price {
            font-size: 20px;
          }
        }
        .basis-color-picker-container {
          margin-top: 60px;
        }
      }
    }
    .sku-container {
      margin-top: 90px;
    }
    .summary-info-container {
      margin-top: 45px;
      padding: 45px 0;
    }
    .qa-container {
      margin-top: 100px;
      .qa-content {
        margin-top: 60px;
      }
    }
    .fyi-container {
      margin: 100px 0;
      padding: 40px 0;
      p {
        font-size: 14px;
        margin-top: 16px;
      }
    }
  }
}

// Desktop
@media screen and (min-width: 1024px) {
  .reserve-page-container {
    padding-top: 120Px;
    .section {
      margin-top: 40Px;
      .section-title {
        font-size: 32Px;
      }
    }
    .spu-basis {
      margin-top: 100Px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: flex-start;
      .banner-container {
        position: relative;
        width: 620Px;
        .banner {
          width: 100%;
          height: 500Px;
          position: absolute;
          background: #333333;
          border-radius: 20Px;
        }
      }
      .basis-selector-container {
        width: 300Px;
        .basis-main-container {
          position: relative;
          .main-title {
            font-size: 20Px;
          }
          .basis-related-txt {
            font-size: 14Px;
          }
          .basis-price {
            font-size: 20Px;
            position: absolute;
            top: 0;
            right: 0;
          }
        }
        .basis-color-picker-container {
          margin-top: 80Px;
        }
      }
    }
    .sku-container {
      margin-top: 80Px;
    }
    .summary-info-container {
      margin-top: 60Px;
      padding: 60Px 0;
    }
    .qa-container {
      margin-top: 100Px;
      .qa-content {
        margin-top: 60Px;
      }
    }
    .fyi-container {
      margin: 100Px 0;
      padding: 40Px 0;
      p {
        font-size: 14Px;
        margin-top: 16Px;
      }
    }
  }
}

// modal
.model-title {
  
}
.model-content {
}

// Mobile
@media screen and (max-width: 767px) {
  .model-title {
    font-size: 24px;
  }
  .model-content {
    margin-top: 20px;
    margin-bottom: 40px;
    font-size: 14px;
    p {
      margin: 10px 0;
    }
  }
}

// Tablet
@media screen and (max-width: 1023px) and (min-width: 768px) {
  .model-title {
    font-size: 24px;
  }
  .model-content {
    margin-top: 20px;
    margin-bottom: 40px;
    font-size: 14px;
    p {
      margin: 10px 0;
    }
  }
}

// Desktop
@media screen and (min-width: 1024px) {
  .model-title {
    font-size: 24Px;
  }
  .model-content {
    margin-top: 20Px;
    margin-bottom: 40Px;
    font-size: 14Px;
    p {
      margin: 10Px 0;
    }
  }
}
</style>